<template>
    <div class="permissions-form">
      <!--  -->
      <el-select v-model="project" multiple filterable placeholder="请选择">
        <template #default>
          <div class="permissions-form-select">
            <!-- 占位 -->
            <div class="permissions-form-select-hide">
              <el-option label="Action 1" value="1" />
            </div>
            <!-- 实际显示的 -->
            <div class="flex permissions-form-select-show">
              <!-- 项目 -->
              <div class="shrink-0 permissions-form-select-show-box permissions-form-select-show-project">
                <div class="flex items-center permissions-form-select-show-box-header">项目</div>
                <el-scrollbar height="200px">
                  <div
                    class="permissions-form-select-show-box-list-item"
                    :class="{ active: item.id === projectActive?.id}"
                    v-for="item in projectList"
                    :key="item.id"
                    @click="projectActive = item"
                  >
                    {{ item.name }}
                  </div>
                </el-scrollbar>
              </div>
              <!-- 空间 -->
              <div class="flex-1 permissions-form-select-show-box permissions-form-select-show-toolbox">
                <div class="flex items-center permissions-form-select-show-box-header">
                  <el-input
                    v-model="toolboxSearch"
                    class="responsive-input"
                    placeholder="搜索空间"
                    :suffix-icon="Search"
                  />
                </div>
                <el-scrollbar height="200px">
                  <div
                    class="permissions-form-select-show-box-list-item"
                    v-for="item in filterToolboxList"
                    :key="item.id"
                    :class="{ active: toolboxActive(item) }"
                  >
                    <span>{{ item.name }}</span>
                    <el-icon class="permissions-form-select-show-box-list-item-icon" v-if="toolboxActive(item)"><Select /></el-icon>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
  
        </template>
      </el-select>

      <!--  -->
      <div v-if="true" class="flex items-center copy-permissions" @click="dialogTableVisible = true">
        <el-icon class="copy-permissions-icon"><CopyDocument /></el-icon>复制上级组权限
      </div>
      <div v-else class="flex items-center cancel-copy-permissions">
        <el-icon class="copy-permissions-icon"><CopyDocument /></el-icon>
        <span>已关联上级组权限</span>
        <span class="cancel-copy-permissions-btn">取消</span>
      </div>

      <!--  -->
      <div v-if="tableData.length === 0" class="flex justify-center items-center not-table">
        <div>
          <div class="flex justify-center">
            <el-icon><Coin /></el-icon>
          </div>
          <div class="not-table-icon-text">请添加空间</div>
        </div>
      </div>
      <el-table v-else :data="tableData" style="width: 100%" border>
        <el-table-column label="所在空间">
          <template #default="scope">
            <div class="flex items-center">
              {{ scope.row.name }} / {{ scope.row.name }}
              <el-icon v-if="scope.row.is_link" class="table-connection-icon"><Connection /></el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="权限" width="130">
          <template #default="scope">
            <div>
              <span v-if="scope.row.is_link">{{ scope.row.permission_group }}</span>
              <el-dropdown trigger="click" v-else>
                <span class="el-dropdown-link">
                  {{ scope.row.permission_group }}<el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>管理者</el-dropdown-item>
                    <el-dropdown-item>开发者</el-dropdown-item>
                    <el-dropdown-item>浏览者</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
      <div class="flex justify-end mt-10">
        <el-button @click="onCloseDrawer">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>

      <el-dialog v-model="dialogTableVisible" title="复制上级组权限" width="350px" top="30vh">
        <div>
          <div>复制方式：</div>
          <el-radio-group v-model="copyMethod">
            <el-radio value="1">
              <div class="flex items-center">
                复制
                <el-tooltip placement="bottom" effect="light">
                  <template #content>上级组的当前权限会添加到目标用户组<br/>中，可修改</template>
                  <el-icon class="ml-1"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </el-radio>
            <el-radio value="2">
              <div class="flex items-center">
                关联
                <el-tooltip placement="bottom" effect="light">
                  <template #content>上级组的权限会添加入目标用户组中，<br/>且关联期间上级组权限的增删改将实时<br/>同步到目标用户组，不可修改</template>
                  <el-icon class="ml-1"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </el-radio>
          </el-radio-group>
          <div class="flex justify-end mt-10">
            <el-button @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogTableVisible = false">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import {
  CopyDocument,
  Connection,
  ArrowDownBold,
  Coin,
  Search,
  Select,
  QuestionFilled
} from '@element-plus/icons-vue'
import http from '@/api/index'

const emits = defineEmits<{
  (e: 'onCloseDrawer', value: boolean): void
}>()
const props = defineProps<{ firstFrom?: any }>()

const onCloseDrawer = () => {
  emits('onCloseDrawer', false)
}

const tableData = ref<any[]>([
  {
    name: '2025-6-20新建空间1',
    id: 99120641582838,
    permission_group: 'admin',
    is_link: false,
  },
  {
    name: '2025-6-20新建空间2',
    id: 99120641601799,
    permission_group: 'developer',
    is_link: false,
  },
  {
    name: '2025-7-17空间',
    id: 99120641680662,
    permission_group: 'guest',
    is_link: false,
  }
])

const project = ref([])
const projectList = ref([
  {
    name: '项目1111',
    id: 1,
  },
  {
    name: '项目2222',
    id: 2,
  },
])
const projectActive = ref()
const toolboxSearch = ref('')
const toolboxList = ref([
  {
    name: '空间aaaa',
    id: 1,
  },
  {
    name: '空间bbb',
    id: 2,
  },
  {
    name: '空间ccc',
    id: 3,
  },
  {
    name: '空间ddd',
    id: 4,
  },
  {
    name: '空间eee',
    id: 5,
  },
  {
    name: '空间fff',
    id: 6,
  },
  {
    name: '空间ggg',
    id: 7,
  },
])

const filterToolboxList = computed(() => 
  toolboxList.value.filter(item => item.name.includes(toolboxSearch.value.trim() ))
)

const toolboxActive = (val) => {
  return tableData.value.some(item => item.id === val.id)
}

// 提交
const onSubmit = async () => {
  
  const params = {
    user_group: {
      description: props.firstFrom.description,
      icon_url: props.firstFrom.icon_url,
      inherit_mode: 0,
      name: props.firstFrom.name,
      parent_id: props.firstFrom.parent_id || 0,
    },
    permissions: tableData.value.map(item => { return { node_id: item.id, permission_group: item.permission_group, is_link: item.is_link }}),
    user_group_members: props.firstFrom.user_group_members.map(item => { return { member_id: item.member_id, member_type: item.member_type } })
  }
  const res = await http.api.addUserGroup(params)
  if (res.result) {

  }
}

const dialogTableVisible = ref(false)
const copyMethod = ref('1')

onMounted(() => {

})

</script>

<style lang="scss" scoped>

// 配置权限表单
.permissions-form {
  padding: 0 20px;
  .copy-permissions,
  .cancel-copy-permissions {
    margin: 10px 0;
    color: #1890ff;
    cursor: pointer;
    font-size: 12px;
    .copy-permissions-icon {
      margin-right: 5px;
    }
  }
  .cancel-copy-permissions {
    color: #c9c9c9;
    cursor: none;
    .cancel-copy-permissions-btn {
      color: #1890ff;
      cursor: pointer;
      margin-left: 8px;
    }
  }
  .table-connection-icon {
    color: #1890ff;
    cursor: pointer;
    margin-left: 5px;
  }
  .not-table {
    width: 100%;
    height: 300px;
    font-size: 50px;
    color: #535353;
    .not-table-icon-text {
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

// 上传头像
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  text-align: center;
  background-color: #00e56d;
}
.avatar-uploader-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

// 抽屉标题
.drawer-title {
  background-color: #2b2b2b;
  padding: 10px 20px;
  margin-bottom: 20px;
}


</style>
